<template>
	<view class="page">
		<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000" circular="true" class="swiper">
<!-- 			<swiper-item>
				<image mode="aspectFill" src="https://www.retoc.xyz/banner/pswiper1.jpg"></image>
			</swiper-item> -->
			<swiper-item>
				<image mode="widthFix" src="https://www.retoc.xyz/banner/swiper-1.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image mode="widthFix" src="https://www.retoc.xyz/banner/swiper-2.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image mode="widthFix" src="https://www.retoc.xyz/banner/swiper-3.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image mode="widthFix" src="https://www.retoc.xyz/banner/swiper-4.jpg"></image>
			</swiper-item>
		</swiper>
		<view class="notify-container" @tap="toPage('我的消息','/pages/message_list/message_list')">
			<view class="notify-title">
				<image src="https://www.retoc.xyz/icon/icon-1.png" mode="widthFix" class="notify-icon"></image>
				消息提醒
			</view>
			<view class="notify-content">
				你有{{unreadRows}}条未读消息
			</view>
			<image src="https://www.retoc.xyz/icon/icon-2.png" mode="widthFix" class="more-icon"></image>
		</view>
		<view class="nav-container">
			<view class="nav-row">
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-1.png" mode="widthFix" class="icon" @tap="toPage('在线签到','../checkin/checkin')"></image>
					<text class="name">在线签到</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-5.png" mode="widthFix" class="icon" @tap="toPage('公务出差','../evection_list/evection_list')"></image>
					<text class="name">公务出差</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-6.png" mode="widthFix" class="icon" @tap="toPage('公务出差','../ot_list/ot_list')"></image>
					<text class="name">申请加班</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-3.png" mode="widthFix" class="icon" @tap="toPage('在线请假','../leave_list/leave_list')"></image>
					<text class="name">在线请假</text>
				</view>
			</view>
			<view class="nav-row">
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-4.png" mode="widthFix" class="icon" @tap="toPage('用车申请','../carUse_list/carUse_list')"></image>
					<text class="name">用车申请</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/car.png" mode="widthFix" class="icon" @tap="toPage('用车情况','../car_info/car_info')"></image>
					<text class="name">用车情况</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-7.png" mode="widthFix" class="icon"></image>
					<text class="name">付款申请</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-8.png" mode="widthFix" class="icon"></image>
					<text class="name">在线报销</text>
				</view>
			</view>
			<view class="nav-row">
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-9.png" mode="widthFix" class="icon"></image>
					<text class="name">在线公告</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-10.png" mode="widthFix" class="icon" @tap="toPage('在线审批','../approval_list/approval_list')"></image>
					<text class="name">在线审批</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-11.png" mode="widthFix" class="icon"></image>
					<text class="name">物品领用</text>
				</view>
				<view class="nav">
					<image src="https://www.retoc.xyz/icon/nav-12.png" mode="widthFix" class="icon" @tap="toPage('采购申请','../meterials/meterials')"></image>
					<text class="name">采购申请</text>
				</view>
			</view>
		</view>
		<uni-popup ref="popupMsg" type="top">
			<uni-popup-message type="success" :message="'接收到'+lastRows+'条消息'" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
	
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				timer:null,
				lastRows:0,
				unreadRows:0
			}
		},
		onLoad:function() {
			let that=this;
			uni.$on('showMessage',function(){
				that.$refs.popupMsg.open();
			}) 
			that.ajax(that.url.refreshMessage,"GET",null,function(resp){
				that.unreadRows=resp.data.unreadRows;
				that.lastRows=resp.data.lastRows;
				if(that.lastRows>0){
					uni.$emit("showMessage")
				}
			})
		},
		onUnload:function(){
			uni.$off('showMessage')
		},
		onShow() {
			let that=this
			that.timer=setInterval(function(){
				that.ajax(that.url.refreshMessage,"GET",null,function(resp){
					that.unreadRows=resp.data.unreadRows;
					that.lastRows=resp.data.lastRows;
					if(that.lastRows>0){
						uni.$emit("showMessage")
					}
				})
			},50000)
		},
		onHide() {
				let that=this
				clearInterval(that.timer)
		},
		methods: {
			toPage:function(name,url){
				//TODO 验证用户权限
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="less">
	@import url("index.less");
</style>
